<template>
    <div id="status">
        <h3>运行状态
            <el-button type="primary" @click="reload_data()">刷新</el-button></h3>
        <el-form ref="form" :model="form" label-width="100px" style="max-width:800px">
            <el-form-item label="当前状态">
                {{service_status_txt}}
                <el-button type="primary" size="mini" @click="service_btn_action">{{service_btn_txt}}</el-button>
            </el-form-item>
            <el-form-item label="串口名称">
                <el-select v-model="form.serial_name" placeholder="请选择" :disabled="form.is_open_serial">
                    <el-option v-for="item in serial_list" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="波特率">
                <el-input v-model="form.baudrate" placeholder="波特率" :disabled="form.is_open_serial">
                    <template slot="append">bps</template>
                </el-input>
            </el-form-item>
            <el-form-item label="采集频率">
                <el-input v-model="form.interval" placeholder="采集频率" :disabled="form.is_open_serial">
                    <template slot="append">毫秒</template>
                </el-input>
            </el-form-item>
            <el-form-item label="上限温度">
                <el-input v-model="form.max_temp" placeholder="上限温度" :disabled="form.is_open_serial">
                    <template slot="append">℃</template>
                </el-input>
            </el-form-item>
            <el-form-item label="下限温度">
                <el-input v-model="form.min_temp" placeholder="下限温度" :disabled="form.is_open_serial">
                    <template slot="append">℃</template>
                </el-input>
            </el-form-item>
            <el-form-item label="运行状态">
                <el-tag>共几台，3台在线，几台离线。 服务器状态</el-tag>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    created() {
        this.serial_list = ['ss', '33']
    },
    data() {
        return {
            form: {
                is_open_serial: false,
                serial_name: '',
                baudrate: 9600,
                interval: 200,
                max_temp: 60,
                min_temp: 0,
                sum_num: 0,
                online_num: 0,
                offline_num: 0,
            },
            serial_list: []
        }
    },
    computed: {
        service_btn_txt() {
            let vm = this
            if (vm.form.is_open_serial) {
                return "停止服务"
            } else {
                return "启动服务"
            }
        },
        service_status_txt() {
            let vm = this
            if (vm.form.is_open_serial) {
                return "开启"
            } else {
                return "停止"
            }
        }
    },
    methods: {
        reload_data() {
            //加载服务器数据。
            let vm = this
            vm.ajaxPost('/api/status', {}, function(response) {
                if (response.status == 200) {
                    if (response.data.code == 1) {
                        let data = response.data.data;
                        vm.serial_list = data.comm_list
                        vm.form.is_open_serial = (data.state === 1)
                        vm.form.baudrate = data.baudrate
                        vm.form.interval = data.interval_delay
                        vm.form.max_temp = data.max_temp
                        vm.form.min_temp = data.min_temp
                        vm.form.serial_name = data.serial_name
                    } else {
                        vm.msgboxEx('登录失败', 'error')
                    }
                }
            }, function(error) {
                console.log(error);
            })
        },
        service_btn_action() {
            let vm = this
            if (vm.form.is_open_serial) {
                vm.ajaxPost('/api/close_serial', {}, function(response) {
                    if (response.status == 200) {
                        if (response.data.code == 1) {
                            vm.msgboxEx('服务关闭成功', 'success')
                            vm.reload_data()
                        } else { vm.msgboxEx('服务关闭失败', 'error') }
                    }
                }, function(error) { console.log(error); })
            } else {
                if (vm.isEmpty(vm.form.serial_name)) {
                    vm.msgboxEx('请选择需要打开的端口', 'error')
                    return
                }
                vm.ajaxPost('/api/open_serial', {
                    comm_name: vm.form.serial_name,
                    baudrate: vm.form.baudrate,
                }, function(response) {
                    if (response.status == 200) {
                        if (response.data.code == 1) {
                            vm.msgboxEx('服务启动成功', 'success')
                            vm.reload_data()
                        } else { vm.msgboxEx('服务启动失败', 'error') }
                    }
                }, function(error) { console.log(error); })
            }
        },
        onSubmit() {
            let vm = this
            if (vm.form.pwd != vm.form.pwd2) {
                vm.msgboxEx("密码不一致", 'error')
                return
            }
            vm.ajaxPost('/api/init_sys', {
                uid: vm.form.uid,
                pwd: vm.form.pwd,
                baudrate: vm.form.baudrate,
            }, function(response) {
                if (response.status == 200) {
                    if (response.data.code == 1) {
                        vm.msgboxEx('初始化成功', 'success')
                        vm.$router.push('/login')
                    } else { vm.msgboxEx('初始化失败', 'error') }
                }
            }, function(error) { console.log(error); })
        }
    },
    mounted: function() {
        this.reload_data()
    }
}
</script>
